<template>
    <div>
        <el-page-header @back="goBack" content="查看商品详情"></el-page-header>
        <div class="common_line" style="margin-top: 15px;"></div>
        <el-form ref="formData" :model="formData" label-width="auto" style="margin-top: 15px;">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="商品图片:">
                        <div class="img_view">
                            <el-image class="img" 
                                :src="formData.image_url"
                                fit="fill"
                            ></el-image>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="商品名称:">
                        <div>{{ formData.name }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="商品编号:">
                        <div>{{ formData.goods_no }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="商品分类:" prop="selectCates">
                        <div>{{ formData.category_name }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="状态:">
                        <div>{{ formData.statusName }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="主单位:">
                        <div>{{ formData.main_unit_name }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="formData.deputy_unit_name1">
                    <el-form-item label="辅单位1:">
                        <div>{{ formData.deputy_unit_name1 }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="formData.deputy_unit_name2">
                    <el-form-item label="辅单位2:">
                        <div>{{ formData.deputy_unit_name2 }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="规格:">
                        <div>{{ formData.specifications }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="型号:">
                        <div>{{ formData.type }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="品牌:">
                        <div>{{ formData.brand }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="产地:">
                        <div>{{ formData.origin }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="库存预警:">
                        <div>{{ formData.warning }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="formData.unit_deputy_show&&formData.unit_deputy_show.length">
                <el-table border :data="formData.unit_deputy_show" style="margin-top: 15px;width: 100%;">
                    <el-table-column label="序号" width="80" align="center" prop="index" />
                    <el-table-column label="单位" width="100" align="center" prop="unit_name" />
                    <el-table-column label="条形码" align="center" prop="barcode" />
                    <el-table-column align="center"
                        v-for="(col, index) in unitLevelHeaders" 
                        :key="'header_'+index"
                        :prop="col.prop" 
                        :label="col.label"
                        width="200" />
                </el-table>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注:">
                        <div>{{ formData.remark }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            
            <div v-if="fileLists&&fileLists.length">
                <div style="font-size: 14px;font-weight: bold;height: 48px;line-height: 48px;">附件</div>
                <div class="file_list">
                    <div v-for="item in fileLists" :key="'file_'+item.id" class="file" @click="downloadFile(item)">
                        {{ item.file_name }}
                    </div>
                </div>
            </div>
        </el-form>
        
        <!-- <bottom-btns
            Width="100%"
            MarginTop="30px"
            :buttons="buttonList"
            @superBtnClick="handleButtonClick"
        ></bottom-btns> -->
    </div>
</template>

<script>
import { infoProduct, getPriceLevel } from '@/api/product';

export default {
    name: 'queryProduct',
    data() {
        return {
            isEdit: false,
            defaultIcon: 'https://anhuiyaoying.com/webs/camera.png',
            corp: '',
            pageTitle: '',
            productId: '',
            buttonList: [
                { name: '关闭', type: 'cancel', id:'2' }
            ],
            formData: {
            },
            unitLevelHeaders: [],
            fileLists: [],
            categorys: []
        }
    },
    props: {
        corpId: {
            type: Number
        },
        editId: {
            type: Number
        },
    },
    mounted() {
        this.corp = this.corpId
        this.formData.corp = this.corp
        this.productId = this.editId
        this.getUnitLevels()
    },
    methods: {
        goBack() {
            this.$emit('hidden')
        },
        // 获取单位等级
        getUnitLevels() {
            getPriceLevel({corp: this.corp, is_start: 1}).then(res => {
                let cell = {
                    goods_unit: '',
                    unit_name: '',
                    deputy_ratio: 0,
                    barcode: '',
                    is_main: true
                }
                this.unitLevelHeaders = res.data.data.level_list.filter((item, index) => {
                    item.label = item.price_name
                    item.prop = item.price_column_name
                    return item
                })
                this.getProductInfo()
            })
        },
        downloadFile(item) {
            location.href = item.url_show
        },
        // 商品详情
        getProductInfo() {
            infoProduct(this.productId, {corp: this.formData.corp}).then(res => {
                let info = res.data.data
                info.image_url = info.image ? info.image_show.url : ''
                info.selectCates = [info.category]
                if (info.category_detail && info.category_detail.parent){
                    info.selectCates = [ info.category_detail.parent.id, info.category]
                }
                info.unit_retail_price = info.unit_retail_price?('￥'+parseFloat(info.unit_retail_price)):''
                info.unit_purchase_price = info.unit_purchase_price?('￥'+parseFloat(info.unit_purchase_price)):''
                info.statusName = info.status=='active'?'在售':'停售'
                info.warning = parseFloat(info.warn_inventory_num_low)+' ~ '+parseFloat(info.warn_inventory_num_high)
                let mainUnitItem = info.unit_deputy_show.find(item => item.is_main)
                info.main_unit_name = mainUnitItem.unit_name
                if (info.is_multi_unit && info.deputy_show && info.deputy_show.length){
                    info.deputy_show.forEach((item, index) => {
                        let endStr = ('1'+item.unit_name+'='+parseFloat(item.deputy_ratio)+mainUnitItem.unit_name)
                        info['deputy_unit_name'+(index+1)] = item.unit_name+'('+endStr+')'
                    })
                }
                info.unit_deputy_show.forEach((item, index) => {
                    item.index = index+1
                })
                this.formData = info
                
                // 附件
                this.fileLists = info.file_list_show || []
            })
        }
    }
}
</script>

<style lang="less" scoped>
	@import '../../style/mixin';
    .img_view {
        display: flex;
        align-items: center;
        height: 100px;
        padding-left: 10px;
        .img {
            width: 100px;
            height: 100px;
            &:hover{
                cursor: pointer;
            }
        }
    }
    .file_list {
        font-size: 13px;
        padding-left: 40px;
        .file {
            cursor: pointer;
            padding-bottom: 10px;
            &:hover {
                color: @blue;
            }
        }
    }
</style>